<script>
export default {
  name: "computedPage",
  data(){
    return{
      firstName:'',
      lastName:'',
      fullName:'',
      obj:{
        age:18
      }
    }
  },
  // updated(){
  //   this.fullName = this.firstName + this.lastName
  // },
  // 计算属性，与data平级
  computed:{
    // fullName(){
    //   return this.firstName +this.lastName
    // }
    // fullName:{
    //   get(){
    //     return this.firstName +this.lastName
    //   },
    //   set(val){
    //     console.log(val)      //获取fullName中的值
    //   }
    // }
  },
//   监听属性，与data平级
  watch:{
    // firstName(val){
    //   console.log(val)
    //   this.fullName = this.firstName + this.lastName
    // },
    lastName(val){
      console.log(val)
      this.fullName = this.firstName + this.lastName
    },
    // firstName:{
    //   handler(newVal,oldVal){
    //     console.log(newVal)
    //     console.log(oldVal)
    //   }
    // }
    // 立即监听
    // immediate:true,
  //   深度监听
  //   deep:true
    obj:{
      handler(val){
        console.log(val)
      },
      deep:true
    }
  }
}

//
</script>

<template>
<!--
 计算属性、监听属性和methods的区别：computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算
                              监听属性：用于监测数据的变化并执行相应的逻辑处理
                              methods:具体的操作，主要书写业务逻辑
-->
<div>
  <div>
    姓：<input type="text" v-model="firstName">
  </div>
  <div>
    名：<input type="text" v-model="lastName">
  </div>
  <div>
    姓名：<input type="text" v-model="fullName">
  </div>
</div>
</template>

<style scoped lang="less">

</style>